<!--
  - Copyright (c) 2018.
  - 北京九思金信科技有限公司对该文件内容保留所有权利。
  - 未经许可，不得私自拷贝、传播、发布、引用该文件内容，违者将被追究法律责任。
  -->
  
<template>
  <div class="my_Solve">
    <div class="my_Solve_title">
      <div class="my_Solve_title_return" @click="returnHistiy">
        <img src="@/pages/mobile/assets/img/Back@3x.png" alt>
        <span>我的</span>
      </div>
      <p>设置</p>
      <div class="my_solve_title_img">
        <img src="@/pages/mobile/assets/img/Search@3x.png" @click="searchInfo" alt>
        <img src="@/pages/mobile/assets/img/Screen@3x.png" alt>
      </div>
    </div>
    <div class="scroll" ref="scroll">
      <scroll
        v-if="taskData.length"
        :loadDatas="taskData"
        :pullUpLoad="pullUpLoad"
        :pulldown="pulldown"
        @pullingDown="loadDownData"
        @pullingUp="loadUpData"
        class="my_Solve_center_box"
      >
        <div class="my_Solve_center">
          <div class="my_Solve_center_info" v-for="item in taskData" :key="item.id">
            <img src="@/pages/mobile/assets/img/Task1@3x.png" alt>
            <div class="my_Solve_center_info_title">
              <span>{{item.busiTypeName}}</span>
              <em>{{item.acceptTime | dateFormat('yyyy/MM/dd hh:mm:ss')}}</em>
            </div>
            <div class="my_Solve_center_info_center">
              <p>{{item.messageContent}}</p>
              <span>审批结果：</span>
              <span>{{item.opinionText}}</span>
            </div>
          </div>
        </div>
        <!-- loading 组件 -->
        <div v-show="!taskData.length" class="loading-container">
          <joys-loading></joys-loading>
        </div>
      </scroll>
    </div>

    <transition name="searchAnimation">
      <my-search v-show="searchBox" @childEvent="childEvent"></my-search>
    </transition>
  </div>
</template>

<script>
import Scroll from "@/pages/mobile/components/JoysScroll/JoysScroll";
import JoysLoading from "@/pages/mobile/components/JoysLoading/JoysLoading";
import MySearch from "./MySearch";
export default {
  name: "mySolve",
  components: {
    Scroll,
    MySearch,
    JoysLoading
  },
  data() {
    return {
      pulldown: true,
      pullUpLoad: true,
      taskData: [],
      pageNum: 1,
      taskProcessedDataInfo: [],
      pageSizeNumber: 1,
      searchBox: false
    };
  },
  methods: {
    myListData() {
      // var _this = this;

      setTimeout(() => {
        //模拟ajax
        this.myDataQuery(1);
      }, 100);
    },

    loadDownData() {
      console.log("下拉刷新");
      setTimeout(() => {
        this.myDataQuery(1);
        this.taskData = [];
      }, 1000);
    },
    loadUpData() {
      console.log("上拉加载");
      setTimeout(() => {
        //模拟ajax
        this.pageNum++;
        this.myDataQuery(this.pageNum);
        // this.num++;
        // let newArr = mapArr(this.resultLists, this.num);
        // this.lists = this.lists.concat(newArr);
        // console.log(this.lists);
      }, 1000);
    },

    // 任务列表请求
    myDataQuery(pageNum) {
      this.$axios({
        method: "get",
        url: "/joys-rest/joys-bpm/taskMessage/byCondition",
        headers: {
          "AUTH-TOKEN": localStorage.getItem("AUTH-TOKEN")
        },
        params: {
          workStatus: "ALREADY_WORK",
          pageIndex: pageNum,
          pageSize: 10
        }
      })
        .then(res => {
          // this.taskData = res.data.rows;
          this.taskData = this.taskData.concat(res.data.rows);
          for (let key in this.taskData) {
            this.taskProcessedResult(this.taskData[key]);
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    taskProcessedResult(row) {
      return this.$axios({
        method: "get",
        url: "/joys-rest/joys-bpm/approvals",
        headers: {
          "AUTH-TOKEN": localStorage.getItem("AUTH-TOKEN")
        },
        params: {
          task: row.taskId
        }
      })
        .then(res => {
          this.$set(row, "opinionText", res.data.opinionText);
        })
        .catch(error => {
          console.log(error);
        });
    },
    searchInfo() {
      this.searchBox = true;
    },
    childEvent() {
      this.searchBox = false;
    },
    returnHistiy() {
      this.$router.goBack();
    }
  },
  mounted() {
    this.myListData();
  }
};
</script>

<style lang="less" scoped>
.my_Solve {
  position: fixed;
  top: 0rem;
  bottom: 0.55rem;
  width: 100%;
  z-index: 200;
  height: 100%;
  overflow: hidden;
  background: #fbf9fe;
  .my_Solve_title {
    width: 100%;
    height: 0.44rem;
    text-align: center;
    line-height: 0.44rem;
    background: #ffffff;
    box-shadow: inset 0 -1px 0 0 rgba(207, 207, 207, 0.2);
    .my_Solve_title_return {
      margin-top: -0.04rem;
      float: left;
      img {
        // width: 0.15rem;
        height: 0.205rem;
        padding-left: 0.085rem;
      }
      span {
        font-family: Regular;
        font-size: 0.17rem;
        color: #3e3e3e;
        letter-spacing: -0.41px;
        line-height: 0.22rem;
      }
    }
    p {
      font-family: Semibold;
      font-size: 0.17rem;
      color: #3e3e3e;
      letter-spacing: -0.41px;
      text-align: center;
      height: 0.44rem;
      line-height: 0.44rem;
      margin-left: 0.7rem;
      margin-right: 0.7rem;
    }
    .my_solve_title_img {
      margin-top: -0.46rem;
      float: right;
      margin-right: 0.2rem;
      img {
        margin-left: -0.05rem;
        height: 0.22rem;
      }
    }
  }
  .scroll {
    width: 100%;
    .my_Solve_center_box {
      overflow: hidden;
      height: 100%;
      width: 100%;
      margin-top: 0.44rem;
      // margin-bottom: 0.74rem;
      .my_Solve_center {
        // margin-top: 0.14rem;
        padding-bottom: 0.06rem;
        border-radius: 0.04rem;
        margin-bottom: 0rem;
        // margin: 0 0.32rem;
        .my_Solve_center_info {
          background: #ffffff;
          box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.09);
          border-radius: 0.04rem;
          margin: 0 0.16rem 0.1rem 0.16rem;
          // margin-bottom: 0.1rem;
          padding-bottom: 0.15rem;
          img {
            float: left;
            background: #d8d8d8;
            width: 0.18rem;
            height: 0.18rem;
            margin-left: 0.16rem;
          }
          .my_Solve_center_info_title {
            padding-left: 0.24rem;
            padding-right: 0.16rem;
            margin: 0 0.08rem;
            border-bottom: 1px #eeeeee solid;
            padding-top: 0.2rem;
            padding-bottom: 0.3rem;

            span {
              float: left;
              font-family: Mediums;
              font-size: 0.15rem;
              color: #202f1f;
              letter-spacing: -0.41px;
            }
            em {
              float: right;
              text-align: right;
              font-family: Regular;
              font-size: 0.13rem;
              color: #adadad;
              letter-spacing: -0.36px;
              text-align: right;
            }
          }
          .my_Solve_center_info_center {
            padding-left: 0.24rem;
            margin: 0 0.08rem;
            padding-top: 0.09rem;
            line-height: 0.2rem;
            padding-bottom: 0.05rem;
            p {
              font-family: Mediums;
              font-size: 0.15rem;
              color: #636363;
              letter-spacing: -0.41px;
            }
            span {
              display: inline-block;
              font-family: Regular;
              font-size: 0.13rem;
              color: #adadad;
              letter-spacing: -0.36px;
              text-align: right;
              line-height: 0.13rem !important;
            }
          }
        }
      }
      .my_Solve_center::before {
        content: "";
        display: block;
        height: 0.14rem;
        width: 100%;
      }
      // .my_Solve_center::after {
      //   content: "";
      //   display: block;
      //   height: 0.44rem;
      //   width: 100%;
      // }
    }
  }
  .searchAnimation-enter-active,
  .searchAnimation-leave-active {
    transition: all 0.5s ease;
  }
  .searchAnimation-enter,
  .searchAnimation-leave-to {
    opacity: 0;
    transform: translate3d(0%, 5%, 0);
  }
}
</style>
